<template>
  <el-drawer
    :append-to-body="true"
    title="条件设置"
    :visible.sync="$store.state.conditionDrawer"
    direction="rtl"
    class="condition_copyer"
    size="550px"
    font-size="30px"
    :before-close="saveCondition"
  >
    <select v-model="conditionConfig.priorityLevel" class="priority_level">
      <option
        v-for="item in conditionsConfig.conditionNodes.length"
        :value="item"
        :key="item"
      >
        优先级{{ item }}
      </option>
    </select>
    <div class="demo-drawer__content">
      <div class="condition_content drawer_content">
        <p class="tip">当审批单同时满足以下条件时进入此流程</p>
        <ul>
          <li
            v-for="(item, index) in conditionConfig.conditionList"
            :key="index"
            class="initiator"
          >
            <span class="ellipsis"
              >{{  item.showName  }}</span
            >

            <!-- <div v-if="item.type == 1">
              <p
                :class="
                  conditionConfig.nodeUserList.length > 0 ? 'selected_list' : ''
                "
                @click.self="addConditionRole"
                style="cursor: text"
              >
                <span
                  v-for="(item1, index1) in conditionConfig.nodeUserList"
                  :key="index1"
                >
                  {{ item1.name
                  }}<img
                    src="@/assets/images/add-close1.png"
                    @click="
                      $func.removeEle(
                        conditionConfig.nodeUserList,
                        item1,
                        'targetId'
                      )
                    "
                  />
                </span>
                <input
                  type="text"
                  placeholder="请选择具体人员/角色/部门"
                  v-if="conditionConfig.nodeUserList.length == 0"
                  @click="addConditionRole"
                />
              </p>
            </div> -->
            <div v-if="item.columnType == 'String' && item.showType == 3">
              <p class="check_box">
                <a
                  :class="$func.toggleStrClass(item, item1.key) && 'active'"
                  @click="toStrChecked(item, item1.key)"
                  v-for="(item1, index1) in JSON.parse(item.fixedDownBoxValue)"
                  :key="index1"
                  >{{ item1.value }}</a
                >
              </p>
            </div>
            <div v-else>
              <p>
                <select
                v-if="item.type !== 1"
                  v-model="item.optType"
                  :style="'width:' + (item.optType == 6 ? 370 : 100) + 'px'"
                  @change="changeOptType(item)"
                >
                  <option value="1">小于</option>
                  <option value="2">大于</option>
                  <option value="3">小于等于</option>
                  <option value="4">等于</option>
                  <option value="5">大于等于</option>
                  <option value="6">介于两个数之间</option>
                </select>
                <input
                  v-if="item.optType != 6 &&item.type !== 1"
                  type="text"
                  :placeholder="'请输入' + item.showName"
                  v-enter-number="2"
                  v-model="item.zdy1"
                />
              </p>
              <p v-if="item.optType == 6 &&item.type !== 1">
                <input
                  type="text"
                  style="width: 75px"
                  class="mr_10"
                  v-enter-number="2"
                  v-model="item.zdy1"
                />
                <select style="width: 60px" v-model="item.opt1">
                  <option value="<">&lt;</option>
                  <option value="≤">≤</option>
                </select>
                <span
                  class="ellipsis"
                  style="
                    display: inline-block;
                    width: 60px;
                    vertical-align: text-bottom;
                  "
                  >{{ item.showName }}</span
                >
                <select style="width: 60px" class="ml_10" v-model="item.opt2">
                  <option value="<">&lt;</option>
                  <option value="≤">≤</option>
                </select>
                <input
                  type="text"
                  style="width: 75px"
                  v-enter-number="2"
                  v-model="item.zdy2"
                />
              </p>
            </div>
            <!-- <a
              v-if="item.type == 1"
              class="delete"
              @click="
                conditionConfig.nodeUserList = [];
                $func.removeEle(
                  conditionConfig.conditionList,
                  item,
                  'columnId'
                );
              "
              >删除</a
            > -->
            <a
              v-if="item.type == 2"
              class="delete"
              @click="
                $func.removeEle(conditionConfig.conditionList, item, 'columnId')
              "
              >删除</a
            >
          </li>
        </ul>
        <el-button type="primary" @click="addCondition">添加条件</el-button>
        <el-dialog
          title="选择条件"
          :visible.sync="conditionVisible"
          width="480px"
          append-to-body
          class="condition"
        >
          <p>请选择用来区分审批流程的条件</p>
          <p class="check_boxs">
            <!-- <a
              :class="
                $func.toggleClass(conditionList, { columnId: 0 }, 'columnId') &&
                'active'
              "
              @click="
                $func.toChecked(conditionList, { columnId: 0 }, 'columnId')
              "
              >发起人</a
            > -->
            <a
              v-for="(item, index) in conditions"
              :key="index"
              :class="
                $func.toggleClass(conditionList, item, 'columnId') && 'active'
              "
              @click="$func.toChecked(conditionList, item, 'columnId')"
              >{{ item.showName }}</a
            >
          </p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="conditionVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureCondition">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <employees-role-dialog
        :visible.sync="conditionRoleVisible"
        :data.sync="checkedList"
        @change="sureConditionRole"
        :isDepartment="true"
      />
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCondition">确 定</el-button>
        <el-button @click="$store.commit('updateCondition', false)"
          >取 消</el-button
        >
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getDictionary } from "@/api/approve/approve";
import employeesRoleDialog from "../dialog/employeesRoleDialog.vue";
import conditionsJSON from "../../jsons/conditions";
export default {
  components: {
    employeesRoleDialog,
  },
  data() {
    return {
      conditionVisible: false,
      conditionsConfig: {
        conditionNodes: [],
      },
      conditionConfig: {},
      PriorityLevel: "",
      conditions: [],
      conditionList: [],
      checkedList: [],
      conditionRoleVisible: false,
    };
  },
  computed: {
    conditionsConfig1() {
      return this.$store.state.conditionsConfig;
    },
  },
  watch: {
    conditionsConfig1(val) {
      this.conditionsConfig = val.value;
      this.PriorityLevel = val.priorityLevel;
      this.conditionConfig = val.priorityLevel
        ? this.conditionsConfig.conditionNodes[val.priorityLevel - 1]
        : { nodeUserList: [], conditionList: [] };
    },
  },
  methods: {
    changeOptType(item) {
      if (item.optType == 1) {
        item.zdy1 = 2;
      } else {
        item.zdy1 = 1;
        item.zdy2 = 2;
      }
    },
    toStrChecked(item, key) {
      let a = item.zdy1 ? item.zdy1.split(",") : [];
      var isIncludes = this.$func.toggleStrClass(item, key);
      if (!isIncludes) {
        a.push(key);
        item.zdy1 = a.toString();
      } else {
        this.removeStrEle(item, key);
      }
    },
    removeStrEle(item, key) {
      let a = item.zdy1 ? item.zdy1.split(",") : [];
      var includesIndex;
      a.map((item, index) => {
        if (item == key) {
          includesIndex = index;
        }
      });
      a.splice(includesIndex, 1);
      item.zdy1 = a.toString();
    },
    addCondition() {
      this.conditionList = [];
      this.conditionVisible = true;
      if (this.conditionConfig.conditionList) {
        for (var i = 0; i < this.conditionConfig.conditionList.length; i++) {
          var { columnId } = this.conditionConfig.conditionList[i];
          if (columnId == 0) {
            this.conditionList.push({ columnId: 0 });
          } else {
            this.conditionList.push(
              this.conditions.filter((item) => {
                return item.columnId == columnId;
              })[0]
            );
          }
        }
      }
      getDictionary("project_variable").then((res) => {
        let newData = JSON.parse(
          JSON.stringify(res.data.data).replace(/sort/g, "columnId")
        );
        let newData2 = JSON.parse(
          JSON.stringify(newData).replace(/dictValue/g, "showName")
        );
        let newData3 = JSON.parse(
          JSON.stringify(newData2).replace(/dictKey/g, "columnName")
        );
        let newData4 = JSON.parse(
          JSON.stringify(newData3).replace(/parentId/g, "showType")
        );
        let newData5 = JSON.parse(
          JSON.stringify(newData4).replace(/remark/g, "fixedDownBoxValue")
        );
        let newData1 = JSON.parse(
          JSON.stringify(newData5).replace(/code/g, "columnType")
        );
        this.conditions = newData1;
          if (this.conditionConfig.conditionList) {
                  for (var i = 0; i < this.conditionConfig.conditionList.length; i++) {
                      var { columnId } = this.conditionConfig.conditionList[i]
                      if (columnId == 0) {
                          this.conditionList.push({ columnId: 0 })
                      } else {
                          this.conditionList.push(this.conditions.filter(item => { return item.columnId == columnId; })[0])
                      }
                  }
              }
      });
      // this.conditions = conditionsJSON.data;
      // if (this.conditionConfig.conditionList) {
      //   for (var i = 0; i < this.conditionConfig.conditionList.length; i++) {
      //     var { columnId } = this.conditionConfig.conditionList[i];
      //     if (columnId == 0) {
      //       this.conditionList.push({ columnId: 0 });
      //     } else {
      //       this.conditionList.push(
      //         this.conditions.filter((item) => {
      //           return item.columnId == columnId;
      //         })[0]
      //       );
      //     }
      //   }
      // }
          // this.$axios.get(`${process.env.BASE_URL}conditions.json?tableId=${this.tableId}`).then(res => {
          //     this.conditions = res.data;
          //     if (this.conditionConfig.conditionList) {
          //         for (var i = 0; i < this.conditionConfig.conditionList.length; i++) {
          //             var { columnId } = this.conditionConfig.conditionList[i]
          //             if (columnId == 0) {
          //                 this.conditionList.push({ columnId: 0 })
          //             } else {
          //                 this.conditionList.push(this.conditions.filter(item => { return item.columnId == columnId; })[0])
          //             }
          //         }
          //     }
          // })
    },
    sureCondition() {
      //1.弹窗有，外面无+
      //2.弹窗有，外面有不变
      for (var i = 0; i < this.conditionList.length; i++) {
        var {
          columnId,
          showName,
          columnName,
          showType,
          columnType,
          fixedDownBoxValue,
        } = this.conditionList[i];
        if (
          this.$func.toggleClass(
            this.conditionConfig.conditionList,
            this.conditionList[i],
            "columnId"
          )
        ) {
          continue;
        }
        if (columnType == "project_variable") {
          // if (columnType == "Double") {
          this.conditionConfig.conditionList.push({
            showType: showType, //展示类型 1
            columnId: columnId, //id
            type: 2,
            showName: showName, // 名称
            optType: "1",
            zdy1: "2",
            opt1: "<",
            zdy2: "",
            opt2: "<",
            columnDbname: columnName,
            columnType: columnType,
          });
        }
        // if (columnId == 0) {
        //   this.conditionConfig.nodeUserList == [];
        //   this.conditionConfig.conditionList.push({
        //     type: 1,
        //     columnId: columnId,
        //     showName: "发起人",
        //   });
        // } else {
        //   if (columnType == "Double") {
        //     this.conditionConfig.conditionList.push({
        //       showType: showType,
        //       columnId: columnId,
        //       type: 2,
        //       showName: showName,
        //       optType: "1",
        //       zdy1: "2",
        //       opt1: "<",
        //       zdy2: "",
        //       opt2: "<",
        //       columnDbname: columnName,
        //       columnType: columnType,
        //     });
        //   }
        //    else if (columnType == "String" && showType == "3") {
        //     this.conditionConfig.conditionList.push({
        //       showType: showType,
        //       columnId: columnId,
        //       type: 2,
        //       showName: showName,
        //       zdy1: "",
        //       columnDbname: columnName,
        //       columnType: columnType,
        //       fixedDownBoxValue: fixedDownBoxValue,
        //     });
        //   }
        // }
      }
      ////3.弹窗无，外面有-
      for (let i = this.conditionConfig.conditionList.length - 1; i >= 0; i--) {
        if (
          !this.$func.toggleClass(
            this.conditionList,
            this.conditionConfig.conditionList[i],
            "columnId"
          )
        ) {
          this.conditionConfig.conditionList.splice(i, 1);
        }
      }
      this.conditionConfig.conditionList.sort(function (a, b) {
        return a.columnId - b.columnId;
      });
      this.conditionVisible = false;
    },
    saveCondition() {
      this.$store.commit("updateCondition", false);
      var a = this.conditionsConfig.conditionNodes.splice(
        this.PriorityLevel - 1,
        1
      ); //截取旧下标
      this.conditionsConfig.conditionNodes.splice(
        this.conditionConfig.priorityLevel - 1,
        0,
        a[0]
      ); //填充新下标
      this.conditionsConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1;
      });
      for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
        this.conditionsConfig.conditionNodes[i].error =
          this.$func.conditionStr(this.conditionsConfig, i) == "请设置条件" &&
          i != this.conditionsConfig.conditionNodes.length - 1;
      }
      this.$store.commit("updateConditionsConfig", {
        value: this.conditionsConfig,
        flag: true,
        id: this.$store.state.conditionsConfig.id,
      });
    },
    addConditionRole() {
      this.conditionRoleVisible = true;
      this.checkedList = this.conditionConfig.nodeUserList;
    },
    sureConditionRole(data) {
      this.conditionConfig.nodeUserList = data;
      this.conditionRoleVisible = false;
    },
  },
};
</script>

<style lang="scss">
.condition_copyer {
  .priority_level {
    position: absolute;
    background: skyblue;
    top: 20px;
    right: 80px;
    width: 100px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }
  .demo-drawer__content {
    height: 100%;
    .condition_content {
      padding: 20px 20px 0;
      height: 85%;
      .tip {
        margin: 20px 0;
        width: 510px;
        text-indent: 17px;
        line-height: 45px;
        background: rgba(241, 249, 255, 1);
        border: 1px solid rgba(64, 163, 247, 1);
        color: #46a6fe;
        font-size: 14px;
      }
      ul {
        max-height: 500px;
        overflow-y: scroll;
        margin-bottom: 20px;
        .initiator {
          .ellipsis {
            float: left;
            margin-right: 8px;
            margin-top: 12px;
            width: 70px;
            line-height: 32px;
            text-align: right;
            // overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          div {
            display: inline-block;
            width: 415px;
            p:not(:last-child) {
              margin-bottom: 10px;
            }
            p {
              margin-bottom: 20px;
            }
          }
          :not(:last-child) > div > p {
            margin-bottom: 20px;
          }
          .delete {
            // float: right;
            margin: 20px;
            color: #3296fa;
          }
          select {
            width: 100px;
            margin-right: 10px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(217, 217, 217, 1);
          }
          input {
            width: 250px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(217, 217, 217, 1);
          }
          //   select, input {
          //     width: 260px;
          //   }
          //   select {
          //     margin-right: 10px;
          //     width: 100px;
          //   }
          .selected_list {
            display: flex;
            flex-wrap: wrap;
            padding-left: 10px;
            border-radius: 4px;
            min-height: 40px;
            border: 1px solid #d9d9d9;
            word-break: break-word;
            span {
              margin: 5px;
              padding: 3px 6px 3px 9px;
              // line-height: 12px;
              white-space: nowrap;
              border-radius: 2px;
              border: 1px solid #dcdcdc;
            }
          }
          .check_box {
            line-height: 32px;
          }
        }
      }

      .el-button {
        margin-bottom: 20px;
      }
    }
  }
  .demo-drawer__footer {
    padding: 10px;
  }
}
.check_boxs {
  color: #666666;
  margin-bottom: 10px;
  a {
    font-size: 12px;
    position: relative;
    padding-left: 20px;
    margin-right: 30px;
    cursor: pointer;
    color: #333;
    white-space: pre;
  }
   a:before {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 0.07143rem solid #dcdfe6;
    border-radius: 0.14286rem;
    left: 0;
    top: 0.07143rem;
    content: '';
}
  a.active::after {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    top: 3px;
    left: 3px;
    content: "";
    background: url(~@/assets/images/check_box.png) no-repeat center;
  }
  a:hover {
    color: rgba(64, 163, 247, 1);
  }
}
</style>

